<template>
  <div class="act">
    <div class="bgcImg">
      <img :src="imgUrl + '/bigRun/bgc/hotel-banner3.png'" alt="" class="img" />
    </div>
    <div class="rule">活动规则</div>
    <div class="actBox">
      <div class="actFont">
        权益项目活动细则<br />1、本权益激活绑定个人信息后不限制使用次数。<br />
        2、预订酒店时请确保信息真实有效，一经发现虚假资料，有权拒绝提供服务。<br />
        3、酒店预订成功后，如需取消此预订，请查看确认信中的取消政策，如果超过免费取消时限，则房费不退。<br />
        4、甄选酒店尊享待遇：<br />
        • 每⽇免费早餐 <br />• 提前入住、延迟退房 <br />• 免费网络 <br />•
        客房免费升级 <br />• 入住期间尊享50---200美金消费抵扣额度 <br />•
        贵宾欢迎礼品 <br />• 专属礼宾服务
        <br />*酒店列表会根据实际情况不定期更新
        <br />*具体尊享待遇以系统中酒店所示为准
      </div>
      <div class="button" @click="goVip">立即领取权益</div>
    </div>
    <div class="title">支持酒店列表</div>
    <div class="city">
      <div class="city3">地点</div>
      <div class="city2">
        <div class="none"></div>
        <div class="city1">城市</div>
      </div>
    </div>

    <div class="box">
      <div class="box1">北京</div>
      <div class="box2">
        <div>北京中国大饭店</div>
        <div>北京国贸大酒店</div>
        <div>北京嘉里大酒店</div>
        <div>北京怡亨酒店</div>
        <div>北京王府半岛酒店</div>
        <div>北京璞瑄酒店</div>
        <div>北京瑜舍酒店</div>
        <div>北京华彬费尔蒙酒店</div>
        <div>北京丽晶酒店</div>
        <div>北京瑰丽酒店</div>
      </div>
    </div>
    <div class="box">
      <div class="box1">上海</div>
      <div class="box2">
        <div>上海静安香格里拉大酒店</div>
        <div>上海浦东嘉里大酒店</div>
        <div>上海素凯泰酒店</div>
        <div>上海柏悦酒店</div>
        <div>上海浦东香格里拉大酒店</div>
        <div>上海和平饭店</div>
        <div>上海半岛酒店</div>
        <div>上海新天地朗廷酒店</div>
        <div>上海万达瑞华酒店</div>
        <div>上海佘山世茂洲际酒店</div>
        <div>上海镛舍酒店</div>
        <div>上海外滩英迪格酒店</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      // activityProductNo: this.$route.query.activityProductNo,
      // equityNo: this.$route.query.equityNo,
      // productName: this.$route.query.productName,
      // equityName: this.$route.query.equityName,
      discountInfo: [],
      goodsInfo: {}
    };
  },
  created() {
    this.goodsShow()
    console.log(1111, this.activityProductNo, this.equityNo, this.productName);
  },
  mounted() {
  },
  methods: {
    // 商品详情展示
    goodsShow() {
      const params = {
        activityProductNo: this.$route.query.activityProductNo
      }
      this.$HttpPost(this.$api.goodsDetails, params).then((res) => {
        if (res.code === '000') {
          this.goodsInfo = res.content
          //查看是否有使用的权益
          this.$HttpPost(this.$api.canUse, params).then(res => {
            if (res.code === '000') {
              this.discountInfo = res.content
            }
          })
        } else {
          this.$toast(res.desc, 'middle')
        }
      })
    },
    goVip() {
      if (this.discountInfo.length == 0) {  //length不为0
        Toast('您暂无' + this.goodsInfo.equityName + '会员专属权益，请前去首页购买' + this.goodsInfo.equityName + '会员权益，再来免费领取' + this.goodsInfo.productName + '商品。')

      } else {
        let id = this.discountInfo[0].id
        sessionStorage.setItem('id', JSON.stringify(id))
        this.$router.push({
          path: '/interest',
          query: {
            activityProductNo: this.goodsInfo.activityProductNo,
            equityNo: this.goodsInfo.equityNo,
            productName: this.goodsInfo.productName,
            equityName: this.goodsInfo.equityName,
            id: id
          }
        })

      }
    }
  }
}


</script>

<style scoped lang="scss">
.act {
  font-family: PingFangSC, PingFangSC-Regular;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(244, 245, 247);
}

.bgcImg {
  .img {
    height: 433px;
  }
}

.rule {
  height: 113px;
  line-height: 113px;
  font-size: 40px;
  color: #272727;
  font-weight: 600;
  display: block;
  position: relative;
}

.rule:before,
.rule:after {
  content: "";
  position: absolute;
  top: 47%;
  background: #494949;
  width: 32%;
  height: 10px;
}

.rule:before {
  left: 0%;
}

.rule:after {
  right: 0%;
}

.actBox {
  padding: 54px 0;
  background-color: #ffffff;
  width: 95%;
  border-radius: 12px;
  margin: 0 auto;
}

.actFont {
  text-align: left;
  padding: 0 23px;
  font-size: 30px;
  color: #3f3535;
  line-height: 42px;
  margin-bottom: 54px;
}

.button {
  margin-top: 66px;
  width: 583px;
  height: 105px;
  line-height: 105px;
  background: linear-gradient(136deg, #4b4b56 100%, #34343e 100%);
  margin: 0 auto;
  font-size: 37px;
  color: #f8d1aa;
  letter-spacing: 12px;
  font-weight: 400;
}

.title {
  position: relative;
  margin-left: 40px;
  margin-top: 41px;
  margin-bottom: 41px;
  font-size: 40px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 600;
  color: #3e3e3e;
  text-align: left;
  line-height: 41px;
  letter-spacing: 1px;

  &::after {
    content: "";
    position: absolute;
    left: -20px;
    top: -0.667vw;
    display: block;
    width: 5px;
    height: 53px;
    background: #000000;
  }
}

.city {
  width: 95%;
  height: 66px;
  line-height: 66px;
  margin: 0 auto;
  display: flex;
  letter-spacing: 1.6vw;
}

.city3 {
  flex: 1;
  text-align: center;
  width: 135px;
  height: 66px;
  font-size: 27px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #f8d1aa;
  background: linear-gradient(136deg, #4b4b56 13%, #34343e 91%);
  box-shadow: 0px 9px 11px 0px rgba(104, 104, 104, 0.5);
}

.city2 {
  box-sizing: border-box;
  width: 557px;
  display: flex;
  background: linear-gradient(136deg, #1a1b1c 13%, #34343e 91%);
  box-shadow: 0px 9px 11px 0px rgba(104, 104, 104, 0.5);

  .none {
    width: 13.267vw;
    height: 66px;
  }

  .city1 {
    width: 61vw;
    height: 66px;
    // background: linear-gradient(136deg,#1a1b1c 13%, #34343e 91%);
    text-align: left;
    // padding: 0 90% 0 10%;
    color: #f8d1aa;
    font-size: 27px;
    font-family: PingFangSC, PingFangSC-Medium;
    // box-shadow: 0px 9px 11px 0px rgba(104,104,104,0.5);
  }
}

.box {
  padding: 41px 0 0 0;
  width: 95%;
  background-color: #fff;
  border-radius: 12px;
  margin: 0 auto;
  letter-spacing: 5px;
  font-size: 30px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #3f3535;
  line-height: 42px;
  display: flex;

  .box1 {
    padding: 0 38px;
    line-height: 42px;
    height: 42px;
  }

  .box2 > div {
    padding: 0 38px;
    height: 42px;
    line-height: 42px;
  }
}
</style>
